<template>
	<view class="content">
		<view class="logo-box">
			<view class="logo"></view>
		</view>
		
		<view class="title"></view>
		<text v-if="isAnswerList" class="no-answer-txt">
			问题列表为空
		</text>
		<view class="list-box" v-else>
			<view class="list-item" v-for="(i,index) in arr" :key="index">
				<view class="answer-box" @click="seeDetail(i.answer)">
					{{i.answer}}
				</view>
				<view class="zan-box" >
					<view class="hand" v-if="filterZan(i._id)?true:false" @click="addZan(i._id)">
						
					</view>
					<text v-else>{{i.zan}}</text>
				</view>
			</view>
		</view>
		
		<view class="back-btn" @click="backBtn">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:[],
				isAnswerList:false
			};
		},
		onShow() {
			console.log(11111)
			this.getList()
		},
		methods:{
			getList(){
				uni.showLoading({
					title:'加载中···',
					mask:true
				})
				uniCloud.callFunction({
					name:'supportGetList'
				}).then((res)=>{
					uni.hideLoading()
					if (res.result.data.length>0) {
						this.isAnswerList = false
					} else{
						this.isAnswerList = true
					}
					this.arr = res.result.data
					console.log(this.arr)
				})
			},
			filterZan(id){
				let flag = true
				for (let s of uni.getStorageSync('zanarr')) {
					if (id==s) {
						flag = false
						}
				}
				return flag
			},
			
			addZan(id){
				uni.showLoading({
					title:'提交中···',
					mask:true
				})
				console.log(1111)
				uniCloud.callFunction({
					name:'supportAddZan',
					data:{id:id}
				}).then((res)=>{
					uni.hideLoading()
					let oldZanArr = uni.getStorageSync('zanarr')
					oldZanArr.push(id)
					uni.setStorageSync('zanarr',oldZanArr)
					console.log(res)
					this.getList()
				})
				
			},
			seeDetail(txt){
				uni.showModal({
					content:txt,
					showCancel:false
				})
			},
			backBtn(){
				uni.navigateTo({
					url:'../index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		margin-bottom: 0;
	}
.list-box{
	// display: flex;
	height: 492rpx;
	overflow-y: scroll;
	// flex-direction: column;
}
.list-item{
	width: 588rpx;
	height: 70rpx;
	background: #fff;
	border: 2px solid #cc0000;
	border-radius: 15rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 24rpx;
	view{
		height: 100%;
		color: #cc0000;
		font-size: 28rpx;
	}
	.answer-box{
		flex: 1;
		line-height: 70rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		padding-left: 15rpx;
	}
	.zan-box{
		width: 127rpx;
		border-left: 2px solid #cc0000;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text{
			font-weight: bold;
		}
		.hand{
			width: 37rpx;
			height: 37rpx;
			background: url(https://7463-tcb-bzd0jghy0g4xhlb863579-8cd72f-1304347316.tcb.qcloud.la/support/hand.png) no-repeat center center;
			background-size: 100% 100%;
		}
	}
	
}
.no-answer-txt{
		font-size: 40rpx;
		color: #cc0000;
		font-weight: bold;
		margin-top: 50rpx;
	}
</style>
